// 注册组件
<template>
  <div class="regist-contains">
    <el-form :model="registForm" :rules="registRules">
      <!-- 用户名 -->
      <el-form-item prop="usename">
          <!-- 用的是饿了么提供的图标字体 -->
          <el-input v-model="registForm.usename" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <!-- 密码 -->
      <el-form-item prop="password">
          <!-- 用的是外部图标字体 -->
          <el-input v-model="registForm.password" prefix-icon="el-icon-lock" placeholder="请输入密码" show-password></el-input>
      </el-form-item>
      <!-- 再次输入密码 -->
      <el-form-item prop="checkPass">
          <!-- 用的是外部图标字体 -->
          <el-input v-model="registForm.checkPass" autocomplete="off" prefix-icon="el-icon-key" placeholder="请再次输入密码" show-password></el-input>
      </el-form-item>
      <!-- 邮箱 -->
      <el-form-item prop="email">
          <!-- 用的是外部图标字体 -->
          <el-input v-model="registForm.email" prefix-icon="el-icon-message" placeholder="请输入邮箱地址" show-password></el-input>
      </el-form-item>
      <el-form-item class="formbtns">
          <el-button class="btn" type="warning">注 册</el-button>
      </el-form-item>
    </el-form>
    
  </div>
</template>

<script>
export default {
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.registForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      registForm:{  //表单收集的数据
        usename:'',
        password:'',
        checkPass:'',
        email:''
      },
      registRules:{  //检验规则
        usename:[
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
        ],
        password:[
          { required: true, message: '请输入登入密码', trigger: 'blur' },
            { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ],
        checkPass:[
          { validator: validatePass2, trigger: 'blur' }
        ],
        email:[
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
}
</script>

<style lang="less" scoped>
.regist-contains{
  background-color: rgba(190, 214, 223, 0.253);;
  // width: 400px;
  padding: 15px;
  padding-bottom: 1px;
  margin: 15% 20px;
  margin-bottom:5% ;
  // border-top: 2px solid #2e4b6d;
  box-shadow: 0 0 10px rgb(122, 154, 165);
  .formbtns{
    display: flex;
    justify-content: center;
    .btn{
      width: 100px;
      height: 50px;
    }
  }
}
</style>